<template>
    <el-drawer :title="titleMap[mode]" v-model="visible" size="60%" destroy-on-close @closed="$emit('closed')">
        <div class="main_body">
			<el-tabs v-model="activeName" @tab-click="tabHandleClick">
				<el-tab-pane v-if="mode=='add' || mode =='update' || mode=='detail' " label="用户基本信息" name="first">
                    <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
                        <el-form-item label="登录账号" prop="username">
                            <el-input v-model="form.username"  :disabled="mode=='show'||mode=='edit' "  placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="登录账号" prop="sex">
                            <el-radio v-model="form.sex" label="0">男</el-radio>
                            <el-radio v-model="form.sex" label="1">女</el-radio>
                        </el-form-item>

                        <el-form-item label="用户密码" prop="password">
                            <el-input v-model="form.password"  :disabled="mode=='show'||mode=='edit' " placeholder="请输入密码" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="againPassWord">
                            <el-input v-model="form.againPassWord"  :disabled="mode=='show'||mode=='edit' " placeholder="请再次输入密码" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="用户邮箱" prop="eMail">
                            <el-input v-model="form.eMail"  :disabled="mode=='show'||mode=='edit' " placeholder="请输入邮箱" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="用户手机号" prop="mobile">
                            <el-input v-model="form.mobile"  :disabled="mode=='show'||mode=='edit' " placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="用户生日" prop="birthday">
                            <el-date-picker
                                v-model="form.birthday"
                                :align="right"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="用户昵称" prop="nickname">
                            <el-input v-model="form.nickname"  :disabled="mode=='show'||mode=='edit' " placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>           
        </div>
        <template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
    </el-drawer>
</template>
<script>
    export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
                visible:false,
                activeName:'first',
                titleMap: {
					add: '新增用户',
					edit: '编辑用户',
					show: '查看'
				},
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                            picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '昨天',
                            onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                        }, {
                            text: '一周前',
                            onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                            }
                    }]
                },
                form:{
                    sex:'0'
                },
                rules:{
                    username: [
						{required: true, message: '请输入登录账号'}
					],
                    password: [
						{required: true, message: '请输入密码'}
					],
                    againPassWord: [
						{required: true, message: '请输入确认密码'}
					],
                    eMail: [
						{required: true, message: '请输入邮箱'}
					],
                    mobile: [
						{required: true, message: '请输入手机号'}
					],
                }
            }
        },
        mounted(){

        },
        created(){

        },
        methods:{
            open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            submit(){
                this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
                        var res = await this.$API.openuser.register.post(this.form);
                        this.isSaveing = false;
                    }
                })       
            }
        }
    }
</script>
<style scoped>
.main_body{
	padding: 10px 20px 20px 20px;
	margin: 0;
	box-sizing: border-box;
}
</style>